<template>
	<view class="applyData">
		<navBar isBack backColor="#fff" title="填写资料" color="#fff" background="transparent"></navBar>
		<view class="aD_topImg">
			<image src="https://manager.ryz1620.com/static/distri/bindEntre.png" mode=""></image>
			<view class="applyLine">
				<view class="applyLine_in">
					<view class="applyLine_top">
						<span class="active">1</span>
						<view class="topLine"></view>
						<span>2</span>
					</view>
					<view class="applyLine_bottom">
						<span>填写信息</span>
						<span>提交申请</span>
					</view>
				</view>
			</view>
		</view>
		<view class="userBig" :style="'margin-top:'+topHeight+'rpx;'">
			<view class="userInfo">
				<view class="userName">姓名<input type="text" v-model="name" placeholder="请输入姓名" /></view>
				<!-- <view class="">联系电话<input type="number" v-model="mobile" placeholder="请输入手机号"/></view> -->
			</view>
		</view>
		<view class="subBtn">
			<button type="default" @click="toBecome">确定</button>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue'
	import service_distri from '@/service/distri.js'
	export default{
		data(){
			return{
				name:'',
				mobile:'',
				follow_id:null,
				topHeight:200,
			}
		},
		components:{
			navBar
		},
		onLoad(options) {
			this.follow_id = options.follow_id,
			this.topHeight = 400 - (Number(this.$store.state.system.navBarHeight)*2)
		},
		methods:{
			// 确定按钮
			toBecome(){
				if(this.name==''){
					uni.showToast({
						title:'请填写真实姓名',
						icon:'none'
					})
					return 
				}
				let new_id = this.$store.state.index.userId;
				let params = {
					follow_id:this.follow_id,
					name:this.name,
					new_id
				}
				service_distri.toBecomePromo(params).then(res=>{
					if(res.code==1){
						uni.redirectTo({
							url:'./success'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}
		
	}
</script>

<style lang="scss" >
	page{height: 100%;}
	.applyData{
		height: 100%;
		background-color: #fff;
		position: relative;
		.aD_topImg{width: 100%;height: 400rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		.applyLine{
			width: 100%;
			position: absolute;
			z-index: 2;
			bottom: 68rpx;
			.applyLine_in{
				width: 686rpx;
				margin: 0rpx auto;
				height: 130rpx;
				display: flex;
				flex-direction: column;
				font: 500 24rpx/38rpx PingFang SC;
				.applyLine_top{
					margin: 23rpx 0;
					display: flex;
					padding-left: 140rpx;
					align-items: center;
					span{
						box-shadow: 1rpx 1rpx 10rpx 5rpx #fff;
						width: 38rpx;
						height: 38rpx;
						border-radius: 50%;
						background-color: #fff;
						text-align: center;
						color: #000;
					}
					.active{
						background-color: #364052;
						color: #fff;
					}
					.topLine{
						width: 340rpx;
						height: 4rpx;
						background-color: #fff;
					}
				}
				.applyLine_bottom{
					width: 100%;
					font: 500 28rpx/40rpx PingFang SC;
					color: #fff;
					padding: 0 101rpx 0 104rpx;
					display: flex;
					justify-content: space-between;
				}
			}
		}
		
		// 姓名电话
		.userBig{
			// margin-top: 200rpx;
			width: 100%;
			position: absolute;
			z-index: 5;
			border-radius: 24rpx 24rpx 0 0 ;
			.userInfo{
				border-radius: 20rpx;
				width: 686rpx;
				height: 210rpx;
				margin: 40rpx auto;
				background-color: #F9F6F3;
				view{
					width: 100%;
					height: 104rpx;
					padding: 0 24rpx;
					display: flex;
					align-items: center;
					font: 600 30rpx/52rpx PingFang SC;
					color: #1A1C20;
					justify-content: space-between;
					
				}
				.userName{
					border-bottom: 2rpx solid #fff;
				}
				input{
					font-weight: 400;
					text-align: right;
					color: #666666;
				}
			}
		}
		.subBtn{
			width: 100%;
			text-align: center;
			position: fixed;
			bottom: 0;
			height: calc(94rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
			height: calc(94rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
			button{
				width: 686rpx;
				height: 84rpx;
				background-color: #364052;
				color: #fff;
				font: 500 28rpx/84rpx PingFang SC;
				border-radius: 44rpx;
			}
		}
	}
</style>
